<template>
  <view class="mine-container" :style="{ height: `${windowHeight}px` }">
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
    <!-- 顶部个人信息栏 -->
    <view class="header-section">
			<view v-if="setStore.baseUrl.indexOf('erp.zyzy') > -1 && userStore.user.userName === 'caiw'">{{setStore.baseUrl}}</view>
      <view class="flex padding justify-between">
        <view class="flex align-center">
          <view v-if="!userStore.avatar" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="userStore.avatar" @click="handleToAvatar" :src="userStore.avatar" class="cu-avatar xl round" mode="widthFix">
          </image>
          <view v-if="!userStore.name" @click="handleToLogin" class="login-tip">
            点击登录
          </view>
          <view v-if="userStore.name" @click="handleToInfo" class="user-info">
            <view class="u_title">
              用户名：{{ userStore.name }}
            </view>
          </view>
        </view>
        <view @click="handleToRole" class="flex align-center">
          <text>{{userStore.roleName}}</text>
          <view class="iconfont icon-right"></view>
        </view>
      </view>
    </view>
    <view class="content-section">
      <view class="mine-actions grid col-4 text-center">
        <view class="action-item" @click="handlePopup(1, '微信群')">
          <view class="iconfont icon-friendfill text-pink icon"></view>
          <text class="text">微信群</text>
        </view>
        <view class="action-item" @click="handlePopup(2, '客服电话')">
          <view class="iconfont icon-service text-blue icon"></view>
          <text class="text">客服电话</text>
        </view>
        <view class="action-item" @click="handleAdviceAdd">
          <view class="iconfont icon-community text-mauve icon"></view>
          <text class="text">反馈建议</text>
        </view>
        <view class="action-item" @click="handlePopup(3, '版本信息')">
          <view class="iconfont icon-version text-green icon"></view>
          <text class="text">版本信息</text>
        </view>
      </view>

      <view class="menu-list">
        <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
          <view class="menu-item-box">
            <view class="iconfont icon-user menu-icon"></view>
            <view>编辑资料</view>
          </view>
        </view>
        <!-- <view class="list-cell list-cell-arrow" @click="handleHelp">
          <view class="menu-item-box">
            <view class="iconfont icon-help menu-icon"></view>
            <view>常见问题</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleAbout">
          <view class="menu-item-box">
            <view class="iconfont icon-aixin menu-icon"></view>
            <view>关于我们</view>
          </view>
        </view> -->
        <view class="list-cell list-cell-arrow" @click="handleToPwd">
          <view class="menu-item-box">
            <view class="iconfont icon-password menu-icon"></view>
            <view>修改密码</view>
          </view>
        </view>
				<view class="list-cell" v-if="userStore.postGroup"  @click="handleToPosts">
				  <view class="menu-item-box" :class="userStore.userKpiPosts&&userStore.userKpiPosts.length>0?'list-cell-arrow':''">
				    <view class="iconfont menu-icon">
							<uni-icons type="auth" color="#007AFF" size="16"></uni-icons>
						</view>
				    <view>岗位</view>
						<view class="menu-item-box-text">{{userStore.postGroup}}</view>
				  </view>
				</view>
				<view class="list-cell" v-if="userStore?.userSalesman">
				  <view class="menu-item-box">
				    <view class="iconfont menu-icon">
							<uni-icons type="medal" color="#007AFF" size="16"></uni-icons>
						</view>
				    <view>积分</view>
						<view class="menu-item-box-text">{{userStore?.userSalesman?.integral}}</view>
				  </view>
				</view>
				<view class="list-cell" v-if="userStore.roleGroup">
				  <view class="menu-item-box">
				    <view class="iconfont menu-icon">
							<uni-icons type="staff" color="#007AFF" size="16"></uni-icons>
						</view>
				    <view>角色</view>
						<view class="menu-item-box-text">{{userStore.roleGroup}}</view>
				  </view>
				</view>
				<view class="list-cell" v-if="userStore.userParent">
				  <view class="menu-item-box">
				    <view class="iconfont menu-icon">
							<uni-icons type="person" color="#007AFF" size="16"></uni-icons>
						</view>
				    <view>上级</view>
						<view class="menu-item-box-text">{{userStore?.userParent?.nickName}}</view>
				  </view>
				</view>
				
				<view class="list-cell list-cell-arrow" v-if="userStore.userParent" @click="call(userStore?.userParent?.phonenumber)">
				  <view class="menu-item-box">
				    <view class="iconfont menu-icon">
							<uni-icons type="phone" color="#007AFF" size="16"></uni-icons>
						</view>
				    <view>上级手机号码</view>
						<view class="menu-item-box-text">{{userStore?.userParent?.phonenumber}}</view>
				  </view>
				</view>
				<view class="list-cell" v-if="userStore.userSalesman">
				  <view class="menu-item-box">
				    <view class="iconfont menu-icon">
							<uni-icons type="shop" color="#007AFF" size="16"></uni-icons>
						</view>
				    <view>归属仓库</view>
						<view class="menu-item-box-text">{{userStore?.userSalesman?.warehouseName}}</view>
				  </view>
				</view>
				<view class="list-cell list-cell-arrow" v-if="userStore.userSalesman" @click="share(userStore?.userSalesman?.recommendCode)">
				  <view class="menu-item-box">
				    <view class="iconfont menu-icon">
							<uni-icons type="redo" color="#007AFF" size="16"></uni-icons>
						</view>
				    <view>推广码</view>
						<view class="menu-item-box-text">{{userStore?.userSalesman?.recommendCode}}</view>
				  </view>
				</view>
				
				
				
      </view>
			
			<view class="cu-list menu">
			  <view class="cu-item item-box">
			    <view class="content text-center" @click="handleLogout">
			      <text class="text-black">退出登录</text>
			    </view>
			  </view>
			</view>

    </view>
  </view>
	<up-popup :show="showRole" closeable :round="10" mode="center"  @close="closeRole">
		<view class="role">
			<view class="role-title">角色切换</view>
			<view class="role-list">
				<view class="role-item main-flex" v-for="(item, index) in userStore.rolesList" :key="item.roleId" @click="changeRole(item)">
					<image class="role-item-img" :src="`/static/images/role/role${index}.png`"></image>
					<view class="role-item-name main-flex-item">{{item.roleName}}</view>
					<uni-icons type="right" size="30"></uni-icons>
				</view>
			</view>
		</view>
	</up-popup>
	<uni-popup ref="popup" type="dialog">
	  <uni-popup-dialog
			type="info"
			:showClose="false" 
			:confirmText="popupType === 1 || popupType === 2 ? '点击复制' : '我知道了'"
	    :title="popupTitle"
	  	@confirm="dialogConfirm">
			<view class="version" v-if="popupType === 3">
				<view class="version-item">食材ERP：V {{version}}</view>
				<view class="version-item">{{setStore.baseUrl}}</view>
			</view>
			<view class="version" v-else-if="popupType === 2">
				<view class="version-item">客服电话：023-68951223</view>
			</view>
			<view class="version" v-else-if="popupType === 1">
				<view class="version-item">廷与食材招商</view>
			</view>
	  </uni-popup-dialog>
	</uni-popup>
	<view>
	  <uni-popup ref="popup1" type="dialog">
	    <uni-popup-dialog type="info" cancelText="关闭" confirmText="退出" title="通知" content="确定注销并退出系统吗"
	      @confirm="dialogConfirm1" @close="dialogClose1">
	    </uni-popup-dialog>
	  </uni-popup>
	</view>
</template>

<script setup>
	import { onMounted, ref } from "vue";
	import config from '@/config.js'
	import useUserStore from '@/store/modules/user'
	import useSetStore from "@/store/modules/set"
	import { getUserProfile } from "@/api/system/user"
	import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
	import { copyText } from "@/utils/ty.js";
	import modal from "@/plugins/modal";
	import { onShow } from "@dcloudio/uni-app";
	const userStore = useUserStore()
	const setStore = useSetStore()
	
	const user = ref({})
	const userParent = ref({})
	const userPost = ref({})
	const userSalesman = ref({})
	const roleGroup = ref("")
	const postGroup = ref("")
	function getUser() {
		userStore.getUserProfile()
	  // getUserProfile().then(response => {
	  //   user.value = response.data
			// userParent.value  = response.parent
	  //   roleGroup.value = response.roleGroup
	  //   postGroup.value = response.postGroup
	  // })
	}
	
	
	const name = userStore.name;
	const version = uni.getSystemInfoSync()?.appVersion;
	const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
	const popup = ref(null);
	const popup1 = ref(null);

	uni.$on('refresh', () => {
		avatar.value = userStore.avatar;
	})

	function handleToEditInfo() {
		uni.navigateTo({
			url: '/pages/info/edit'
		});
	};
	const handleToInfo = () => {
		uni.navigateTo({
			url: '/pages/info/index'
		});
	}
	function handleToSetting() {
		uni.navigateTo({
			url: '/pages/setting/index'
		});
	};
	function handleToLogin() {
		uni.reLaunch({
			url: '/pages/login'
		});
	};
	function handleToAvatar() {
		uni.navigateTo({
			url: '/pages/avatar/index'
		});
	};
	function handleToPosts() {
		if (userStore.userKpiPosts&&userStore.userKpiPosts.length>0) {
			uni.navigateTo({
				url: '/pages/info/posts'
			})
		}
	}
	const popupType = ref(0)
	const popupTitle = ref('')
	function handlePopup(type, title) {
		popupType.value = type
		popupTitle.value = title
		popup.value.open()
	}
	function dialogConfirm() {
		if (popupType.value === 1) {
			copyText('廷与食材招商')
		} else if (popupType.value === 2) {
			copyText('023-68951223')
		}
		popup.value.close()
	};
	function handleHelp() {
		uni.navigateTo({
			url: '/pages_mine/pages/help/index'
		});
	};
	function handleAbout() {
		uni.navigateTo({
			url: '/pages_mine/pages/about/index'
		});
	};
	function handleJiaoLiuQun() {
		uni.showToast({
			title: 'QQ群：133713780',
			mask: false,
			icon: "none",
			duration: 1000
		});
	};
	
	function handleBuilding () {
		
	}
	
	function handleAdviceAdd() {
		uni.navigateTo({
			url: '/pages/defend/adviceAdd'
		})
	}

	const showRole = ref(false)

	const handleToRole = () => {
		showRole.value = true
	}

	const closeRole = () => {
		showRole.value = false
	}

	const changeRole = (item) => {
		showRole.value = false
		userStore.setRole({
			roleName: item.roleName,
			roleId: item.roleId
		})
	}
	
	function handleToPwd() {
	  uni.navigateTo({
	    url: '/pages/pwd/index'
	  });
	}
	
	function handleLogout() {
	  popup1.value.open();
	};
	function dialogConfirm1() {
	  //console.log('----------------点击确认------------')
	  userStore.logOut().then(() => {
	    uni.reLaunch({
	      url: '/pages/login'
	    });
	  })
	};
	function dialogClose1() {
	  //console.log('点击关闭')
	};
	
	// 拨打电话
	const call = (phone) => {
		if (phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			})
		}
	}
	// 推广码
	const share = (recommendCode) => {
		if (recommendCode) {
			const text = `${setStore.baseUrl}/app_api/salesman/spread/enter/${recommendCode}`
			uni.setClipboardData({
				data: text,
				success: function () {
					modal.showToast('复制成功，请前往分享。')
				}
			})
		}
	}
	onMounted(async () => {
		// userStore.getInfo()
		// userStore.getUserProfile()
		
	})
	// onShow(() => {
	// 	uni.setTabBarStyle({
	// 		backgroundColor: setStore.env === 'test' ? '#2c9af1' : '#ffffff'
	// 	})
	// })
</script>

<style lang="scss">
page {
  background-color: #f5f6f7;
}

.mine-container {
  width: 100%;
  height: 100%;
	padding-top: var(--status-bar-height);


  .header-section {
    padding: 15px 15px 45px 15px;
    background-color: #3c96f3;
    color: white;

    .login-tip {
      font-size: 18px;
      margin-left: 10px;
    }

    .cu-avatar {
      border: 2px solid #eaeaea;

      .icon {
        font-size: 40px;
      }
    }

    .user-info {
      margin-left: 15px;

      .u_title {
        font-size: 18px;
        line-height: 30px;
      }
    }
  }

  .content-section {
    position: relative;
    top: -50px;
		padding-bottom: 80px;

    .mine-actions {
      margin: 15px 15px;
      padding: 20px 0px;
      border-radius: 8px;
      background-color: white;

      .action-item {
        .icon {
          font-size: 28px;
        }

        .text {
          display: block;
          font-size: 13px;
          margin: 8px 0px;
        }
      }
    }
  }
}
.role {
	width: 680rpx;
	padding: 30rpx;
	&-title {
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
	}
	&-item {
		margin-top: 40rpx;
		border-radius: 20rpx;
		background-color: #FDEDFF;
		box-sizing: border-box;
		padding-right: 20rpx;
		&-img {
			width: 160rpx;
			height: 160rpx;
		}
		&-name {
			font-size: 40rpx;
			font-weight: bold;
			text-align: right;
		}
	}
}
.cu-list {
	margin: 0 15px;
}
.menu-item-box-text {
	margin-left: auto;
	padding-left: 10px;
	padding-right: 14px;
}
</style>
